<template>
	<view class="container">
		<view class="content">
			<!-- LOGO图标区域 -->
			<view class="logo">
				<image :src="'/static/vehicle_repair/booking/successful.png'"></image>
			</view>
			<!-- 文字区域 -->
			<view class="text-group">
				<view class="success-text">
					预约成功
				</view>
				<view class="order-id">
					预约编号: 1233211234567
				</view>
			</view>
			<!-- 按钮区域 -->
			<view class="button-group">
				<button class="back-home" @click="goback">返回首页</button>
				<button class="booking-details" @click="details">预约详情</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			goback() {
				console.log("点击了返回首页按钮，返回首页");
			},
			details() {
				console.log("点击了预约详情按钮，跳转到预约详情")
				uni.navigateTo({
					url:"/pages/vehicle_repair/bookingDetails/bookingDetails"
				})
			},
		}
	}
</script>

<style>
	.container {
		/* 让内容垂直居中 */
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */
		min-height: 100vh;
		/* 最小高度为视口高度，100%屏幕高度 */
	}
	.content{
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 300rpx;
	}
	/* 图片样式 */
	.logo image {
		width: 132rpx;
		height: 132rpx;
	}
	/* 文字区域样式 */
	.text-group{
		display: flex;
		flex-direction: column;
		margin-top: 80rpx;
		text-align: center;
		gap: 40rpx;
	}
	/* 预约成功文字样式 */
	.success-text{
		font-size: 36rpx;
		font-weight: bold;/* 字体加粗 */
		margin-bottom: 20rpx;
	}
	/* 预约编号 */
	.order-id{
		font-size: 28rpx;
		color: #666;
	}
	/* 按钮容器样式 */
	.button-group{
		margin-top: 80rpx;/* 按钮距离上面的文字距离 */
		display: flex;
		flex-direction: column;/* 按钮垂直排列，上下分布 */
		gap: 40rpx;/* 按钮之间的距离 */
		width: 100%;
		
	}
	/* 每一个按钮样式 */
	.back-home{
		background-color:#E0E0E0;/* 按钮背景颜色 */
		color: #333;/* 按钮文字颜色 */
		border-radius: 8rpx;/* 边框圆角 */
		width: 100%;
		height: 80rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.booking-details{
		background-color: #007af0;
		color: #fff;
		border-radius: 8rpx;
		width: 100%;
		height: 80rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
</style>